<template>
  <div class="app-container">
    <el-dialog :title="pageTitle" :visible.sync="dialogFormVisible" :before-close="beforeClose" width="60%">
      <el-form :label-position="labelPosition">

        <el-form-item label="余额:积分" :label-width="formLabelWidth">
          1元:<el-input-number v-model="form.ratio" :min="1" size="medium" controls-position="right" /> 积分
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="canel">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import { handle } from '@/api/store'
export default {
  name: 'JfHandle',
  data() {
    return {
      labelPosition: 'right',
      formLabelWidth: '220px',
      pageTitle: '店铺积分抵扣余额比例编辑界面',
      dialogFormVisible: false,
      form: {
        id: '',
        title: '',
        ratio: '',
        describe: '',
        name: '',
        phone: ''
      },

    }
  },

  methods: {
    beforeClose() {
      this.canel()
    },

    // 进入界面事件
    ini(item) {
      // 初始化 店铺等级 数据
      this.form.id = item.id
      this.form.ratio = item.ratio
      this.form.title = item.title
      this.form.describe = item.describe
      this.form.name = item.name
      this.form.phone = item.phone
      this.dialogFormVisible = true
      this.pageTitle = '[' + this.form.id + ': ' + this.form.title + '] 店铺积分抵扣余额比例编辑界面'

    },

    // 关闭界面事件
    canel() {
      this.dialogFormVisible = false
    },

    // 提交事件
    sure() {
      console.log(this.form)
      handle(this.form).then(res => {
        Message({
          message: res.data.info,
          type: 'success',
          duration: 2000
        })
        this.$emit('afterSave')
        this.canel()
      })
    }
  }
}
</script>
<style>
.border_input{
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 10px 20px;
  margin: 20px;
}
.block{
  margin-top: 20px;
}
</style>
